<template>
  <div>
    <el-table :data="goodses" @selection-change="handleSelectionChange"
              style="width: 100%" :default-sort = "{prop: 'status', order: 'descending'}">
      <el-table-column type="selection" width=""></el-table-column>
      <el-table-column fixed="left" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button @click="see(scope)" type="text" size="large">
            <el-popover placement="top-start" trigger="hover" content="查看">
              <font-awesome-icon :icon="['far', 'list-alt']" slot="reference"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button @click="edit(scope)" type="text" size="large">
            <el-popover placement="top-start" trigger="hover" content="编辑">
              <font-awesome-icon :icon="['far', 'edit']" slot="reference"></font-awesome-icon>
            </el-popover>
          </el-button>
          <el-button @click="del(scope)" type="text" size="large">
            <el-popover placement="top-start" trigger="hover" content="删除">
              <font-awesome-icon :icon="['far', 'trash-alt']" slot="reference"></font-awesome-icon>
            </el-popover>
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="物品名" width="150" align="center" sortable></el-table-column>
      <el-table-column prop="code" label="编码" width="120" align="center" sortable></el-table-column>
      <el-table-column prop="status" label="状态" width="120" align="center" sortable >
        <template slot-scope="scope">
          <el-switch
            class="switch"
            v-model="scope.row.status"
            active-color="#00A854"
            active-text="启用"
            :active-value="1"
            inactive-color="#F04134"
            inactive-text="禁用"
            :inactive-value="0"
            @change="changeSwitch(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column type="index" label="排序" width="100" align="center"></el-table-column>
      <el-table-column :formatter="dataFormat" prop="addTime" label="添加日期" align="center" sortable></el-table-column>
      <el-table-column prop="description" label="描述" align="center"></el-table-column>
    </el-table>

<!--    查看信息的对话框-->
    <el-dialog title="查看详情" :visible.sync="seeDialogVisible" width="50%">
      <div>
<!--        显示数据:当前行数据-->
        <See :goods="currentGoods" @closeSee="closeSee"></See>
      </div>
    </el-dialog>
<!--    修改休息-->
    <el-dialog title="修改信息" :visible.sync="editDialogVisible" width="50%" v-if="refresh">
      <div>
        <Edit :goods="currentGoods" @conserveEdit="conserveEdit" @closeEdit="closeEdit"></Edit>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Edit from "./edit";
import See from "./see"
export default {
  name: "main.vue",
  inject:['reload'],  //注入inject依赖提供刷新
  //接收父组件传递的数据
  props:{
    goodses: Array
  },
  components:{
    Edit,
    See
  },
  data(){
    return {
      editDialogVisible: false,
      seeDialogVisible: false,
      currentGoods: null,   //记录当前选中的行
      index:null,
      refresh: false,  //刷新
      multipleSelection: []
    }
  },
  methods:{
    see(scope){
      //将选中的行的值设置为当前物料
      this.currentGoods = scope.row;
      //显示对话框
      this.seeDialogVisible = true;
    },
    closeSee(){
      this.seeDialogVisible = false;
    },
    edit(scope) {
      //记录修改数据的下标
      this.index = scope.$index;
      //
      this.currentGoods = scope.row;
      //创建对话框
      this.refresh = true;
      //显示对话框
      this.editDialogVisible = true;
    },
    conserveEdit(temp){
      this.$confirm('请确认是否提交修改?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(temp)
        this.axios.put(this.baseUrl+"goods/update",temp)
          .then(res=>{
            console.log(res.data);
            if("success"===res.data.message){
              this.$message({
                type: 'success',
                message: res.data.data
              });
            }else {
              this.$message({
                type: 'warning',
                message: res.data.data
              });
            }
          })
        //将数据传递给行
        // this.currentGoods = temp;
        this.$set(this.goodses,this.index,temp);
        //关闭对话框
        this.editDialogVisible = false;
        //销毁对话框
        this.refresh = false;
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    closeEdit(){
      this.$confirm('此操作会清空当前所做的修改，请确定是否继续退出？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //关闭对话框
        this.editDialogVisible = false;
        //销毁对话框
        this.refresh = false;
        //
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    del(scope){
      this.$confirm('将删除选中行，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //删除前台数组中的元素
        this.goodses.splice(scope.$index,1);
        //发送请求删除数据库中记录
        this.axios.delete(this.baseUrl+"goods/delete/"+scope.row.id)
          .then(res=>{
            console.log(res.data);
            if("success"===res.data.message){
              this.reload();
              this.$message({
                type: 'success',
                message: res.data.data
              });
            }else {
              this.$message({
                type: 'warning',
                message: res.data.data
              });
            }
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    changeSwitch(row){
      //发送请求修改后台数据
      this.axios.put(this.baseUrl+"goods/update",row)
      .then(res=>{
        console.log(res.data)
        if("success"===res.data.message){
          this.$message({
            type: 'success',
            message: res.data.data
          });
        }else {
          this.$message({
            type: 'warning',
            message: res.data.data
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.$emit("handleSelection",this.multipleSelection)
    },
    dataFormat(row,column){
      let data = row[column.property];
      if (data === null) {
        return ''
      }
      let date = new Date(data)
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    }
  }
}
</script>

<style scoped>

</style>
